<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<html >
<head>
    <meta charset="UTF-8">
    <title>Password Recovery - Online Judge</title>
    <link rel="stylesheet" href="css/styles.css" >
    <script src="js/jquery-1.7.2.js"></script>
    <script src="js/gdoj.js"></script>
</head>
<body>
<div th:replace="common::web-navbar"></div>
<div class="container">
    <div class="content">
        <div class="roundbox" style="width: 420px;margin: 68px auto;">
            <div class="roundbox-title">
                <div class="titled">[[#{password.recovery}]]</div>
            </div>
            <div class="register-box">
                <table class="table-form">
                    <tr>
                        <td colspan="2" class="input">
                            <label for="handle"></label><input class="register-box-input" id="handle" name="username" maxlength="30" th:placeholder="#{password.username}" value=""/>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <input class="register-box-input" id="email" name="email" maxlength="30" th:placeholder="#{password.email}" value=""/>
                        </td>
                    </tr>
                    <tr class="subscription-row">
                        <td colspan="2">
                            <div class="shiftUp">
                                <span class="fielderror"></span>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <div>
                                <input class="register-box-submit login-box-submit" id="sub" type="Submit" th:value="#{password.post}"/>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="clear"></div>
    </div>
    <div th:replace="common::web-footer"></div>
</div>
<script th:src="@{/js/messager.js}"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var formSubmitListener = function () {
            var username = $("input[name=username]").val();
            var email = $("input[name=email]").val();
            var dataReq = {
                "username": username,
                "email": email,
            }
            recovery = function () {
                $(".fielderror").html("");
                var errMsg = ""
                $.ajax({
                    url: "/api/password-recovery" ,
                    type: "POST" ,
                    contentType : 'application/json',
                    data: JSON.stringify(dataReq),
                    success:function (data) {
                        if (data.code != 200) {
                            var errList = data.data
                            for(var j in errList){
                                var eva = errList[j];
                                for(var key in eva){
                                    errMsg += eva[key] + "<br>"
                                }
                            }
                            $(".fielderror").html(errMsg);
                        } else {
                            $.messager.show('提示', '您的密码已发送至您的注册邮箱。', 5000);
                        }
                    },
                    error:function () {
                    },
                    dataType:"json"
                })
            };
            recovery();
            return false;
        }

        $(".login-box-submit").click(function(){
            formSubmitListener()
        });
    });
</script>
</body>
</html>
